<template>
  <panel title=" ">
    <span slot="title-extra"></span>
    <div class="middle-area-districtRight">
      <x-row class="text-content text-content-top">
        <x-col 
          :span="item.span" 
          v-for="(item, index) in info"
          class="top">
          <text-box
            title-place="bottom"
            :title="item.title"
            :value="item.value"
            :unit="item.unit"
            :type="item.type"
            unit-font-size= "13px"
            number-font-size="27px">
          </text-box>
        </x-col>
      </x-row>
      <x-row class="text-content text-content-bottom">
        <x-col 
        :span="item.span" 
        v-for="(item, index) in info2"
        class="bottom">
          <text-box
            title-place="bottom"
            :title="item.title"
            :value="item.value"
            :unit="item.unit"
            :type="item.type"
            unit-font-size= "13px"
            number-font-size="27px">
          </text-box>
        </x-col>
      </x-row>
    </div>
  </panel>
</template>

<script>
export default {
  name: 'PM',
  computed: {
    pm25 () {
      if (!this.$store.getters.pm25) {
        return
      }
      let obj = {}
      let res = _.clone(this.$store.getters.pm25)
      // 做一个天气质量的对应关系
      obj['tvoc'] = res.data['1']
      obj['formaldehyde'] = res.data['2']
      obj['temperature'] = res.data['3']
      obj['humidity'] = res.data['4']
      return obj
    },
    info () {
      let res
      if (!this.pm25) {
        res = {
          tvoc: 0,
          formaldehyde: 0
        }
      } else {
        res = this.pm25
      }
      return [{
        title: '小区TVOC',
        value: res.tvoc,
        unit: 'mg/m³',
        span: 12,
        type: 'green'
      }, {
        title: '小区甲醛',
        value: res.formaldehyde,
        unit: 'ug/m³',
        span: 12,
        type: 'green'
      }]
    },
    info2 () {
      let res
      if (!this.pm25) {
        res = {
          temperature: 0,
          humidity: 0
        }
      } else {
        res = _.clone(this.pm25)
      }
      return [{
        title: '小区温度',
        value: res.temperature,
        unit: '℃',
        span: 12,
        type: 'green'
      }, {
        title: '小区湿度',
        value: res.humidity,
        unit: '%',
        span: 12,
        type: 'green'
      }]
    }
  },
  mounted () {
    setTimeout(this.initialize, 400)
    // 获取空气质量检测仪数据
    this.requestRestfulData()
  },

  methods: {
    requestRestfulData () {
      this.$store.dispatch('updatePM25')
    }
  }
}
</script>
<style lang="stylus" scoped>
@import '../../../../assets/stylus/base'
.middle-area-districtRight {
  margin-top: 3vmin;
  font-size: normal;
  .isRightBorder {
    border-right: 1px dashed rgba(255,255,255,0.3);
  }
  .pad-30 {
    padding-left: 30px;
  }
  .text-content-top {
    width: inherit;
    font-weight: 100;
    margin: 0 20px;
    border-bottom: 1px dashed rgba(255,255,255,0.3);
    padding-bottom: 4px;
    .top {
      box-sizing: border-box;
      padding-top: 1px;
      padding-bottom: 2.4vmin;    
      &:nth-child(1) {
      border-right: 1px dashed rgba(255,255,255,0.3);
      padding-left: 16px;
      }
      &:nth-child(2) {
        padding-left: 30px;
      }
    }
  }
  .text-content-bottom {
    width: inherit;
    font-weight: 100;
    margin: 0 20px;
    .bottom {
      box-sizing: border-box;
      padding-top: 4vmin;
      &:nth-child(1) {
      border-right: 1px dashed rgba(255,255,255,0.3);
      padding-left: 16px;
      }
      &:nth-child(2) {
        padding-left: 30px;
      }
    }
  }
}
.x-text-box__value{
  color:#3ec152 !important;
}
</style>